import React, { useEffect } from "react"
import { Layout, Popconfirm } from "antd"
import styles from "./index.module.scss"
import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom"
import { logout, getUser } from "../../store/action"
import { useDispatch } from "react-redux"
import store from "../../store"
const { Header, Sider, Content } = Layout
function Home() {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  // 获取当前地址
  const location = useLocation()
  // 获取当前地址
  const defaultPath = location.pathname
  // 获取用户信息
  useEffect(() => {
    dispatch(getUser())
  })
  const { user } = store.getState()
  // 退出登录
  const LogOut = async () => {
    // 清楚redux中token
    await logout()
    navigate("/login")
  }
  return (
    <div className={styles.home}>
      <Layout className={styles.layout}>
        <Header style={{ padding: 0 }}>
          <div className={styles.header_left}></div>
          <div className={styles.header_right}>
            <span className={styles.header_xf}>{user.name}</span>
            <span className={styles.header_out}>
              <Popconfirm
                placement="bottom"
                title="是否确认退出登录"
                onConfirm={LogOut}
                okText="退出"
                cancelText="取消"
              >
                <span>
                  <svg
                    style={{
                      position: "relative",
                      top: "2px",
                      fontSize: "14px"
                    }}
                    viewBox="64 64 896 896"
                    focusable="false"
                    data-icon="logout"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                  >
                    <path d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5a353.84 353.84 0 01-112.7 75.9A352.8 352.8 0 01512.4 866c-47.9 0-94.3-9.4-137.9-27.8a353.84 353.84 0 01-112.7-75.9 353.28 353.28 0 01-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 000-12.6z"></path>
                  </svg>
                  &nbsp;退出
                </span>
              </Popconfirm>
            </span>
          </div>
        </Header>
        <Layout>
          <Sider>
            <ul className={styles.sider_ul}>
              <li className={defaultPath === "/home" ? styles.active : ""}>
                <NavLink to="/home">
                  <span>
                    <svg
                      viewBox="64 64 896 896"
                      focusable="false"
                      data-icon="home"
                      width="1em"
                      height="1em"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path>
                    </svg>
                  </span>
                  <span className={styles.sider_text}>数据概览</span>
                </NavLink>
              </li>
              <li
                className={defaultPath === "/home/content" ? styles.active : ""}
              >
                <NavLink to="/home/content">
                  <span>
                    <svg
                      viewBox="64 64 896 896"
                      focusable="false"
                      data-icon="diff"
                      width="1em"
                      height="1em"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path d="M476 399.1c0-3.9-3.1-7.1-7-7.1h-42c-3.8 0-7 3.2-7 7.1V484h-84.5c-4.1 0-7.5 3.1-7.5 7v42c0 3.8 3.4 7 7.5 7H420v84.9c0 3.9 3.2 7.1 7 7.1h42c3.9 0 7-3.2 7-7.1V540h84.5c4.1 0 7.5-3.2 7.5-7v-42c0-3.9-3.4-7-7.5-7H476v-84.9zM560.5 704h-225c-4.1 0-7.5 3.2-7.5 7v42c0 3.8 3.4 7 7.5 7h225c4.1 0 7.5-3.2 7.5-7v-42c0-3.8-3.4-7-7.5-7zm-7.1-502.6c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v704c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32V397.3c0-8.5-3.4-16.6-9.4-22.6L553.4 201.4zM664 888H232V264h282.2L664 413.8V888zm190.2-581.4L611.3 72.9c-6-5.7-13.9-8.9-22.2-8.9H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h277l219 210.6V824c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V329.6c0-8.7-3.5-17-9.8-23z"></path>
                    </svg>
                  </span>
                  <span className={styles.sider_text}>内容管理</span>
                </NavLink>
              </li>
              <li
                className={defaultPath === "/home/article" ? styles.active : ""}
              >
                <NavLink to="/home/article">
                  <span>
                    <svg
                      viewBox="64 64 896 896"
                      focusable="false"
                      data-icon="edit"
                      width="1em"
                      height="1em"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path>
                    </svg>
                  </span>
                  <span className={styles.sider_text}>发布文章</span>
                </NavLink>
              </li>
            </ul>
          </Sider>
          <Content className={styles.content}>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </div>
  )
}

export default Home
